{% extends 'base.html' %}
{% block title %}授权组{% endblock %}
{% block content %}
	<div class="layui-btn-group demoTable">
  <button class="layui-btn" data-type="delUser">删除选中组</button>
  <button class="layui-btn" data-type="addUser">添加组</button>
  <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>

<table class="layui-table" lay-data="{width: 'full-200', height:'full-200', url:'{% url 'user:group_list' %}?type=all', page:true, id:'idTest', skin: 'row', even: true}" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{checkbox:true, fixed: true}"></th>
      <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
	    <th lay-data="{field:'name', width:150}">名称</th>
      <th lay-data="{field:'users', width:150, sort: true}">授权用户</th>
      <th lay-data="{field:'asset', width:150, sort: true}">授权资产</th>

      <th lay-data="{fixed: 'right', width:500, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
  </thead>
</table>
<script type="text/html" id="titleTpl">
  <a href="/?table-demo-id={{data.code}}" class="layui-table-link" target="_blank">{{d.data}}</a>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs" lay-event="auth_user">授权用户</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="auth_user_del">移除授权用户</a>
  <a class="layui-btn layui-btn-xs" lay-event="auth_asset">授权资产</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="auth_asset_del">移除授权资产</a>
</script>

<script>
layui.use('table', function(){
  var table = layui.table;
  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){ //查看授权组
      layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){ //删除授权组
      layer.confirm('真的删除么', function(index){
        del_data = {'id': data.id};
        $.ajax({
		        url: '{% url 'user:group_del' %}',
		        dataType: 'json',
		        type: 'post',
		        data: del_data,
		        success: function (datas) {
				        if(datas.code === 0) {
				            obj.del();
				            layer.msg(datas.msg)
				        } else{
				            layer.msg(datas.msg)
				        }
            }
        });
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
{#      window.location.href="{% url 'user:group_edit' %}?id="+data.id;#}
      layer.open({
					  type: 2,
					  title: '授权用户',
					  shadeClose: true,
					  shade: 0.8,
		        maxmin: true,
					  area: ['50%', '40%'],
					  content: "{% url 'user:group_edit' %}?id="+data.id
					});
    } else if(obj.event === 'auth_user'){ //授权用户
        layer.open({
					  type: 2,
					  title: '授权用户',
					  shadeClose: true,
					  shade: 0.8,
		        maxmin: true,
					  area: ['80%', '90%'],
					  content: 'auth_user/?type=auth&id='+data.id
					});
    } else if(obj.event === 'auth_user_del') { //移除授权用户
        layer.open({
					  type: 2,
					  title: '移除授权用户',
					  shadeClose: true,
					  shade: 0.8,
		        maxmin: true,
					  area: ['80%', '90%'],
					  content: 'auth_user/?type=del&id='+data.id
					});
    } else if(obj.event === 'auth_asset') { //授权资产
        layer.open({
					  type: 2,
					  title: '授权资产组',
					  shadeClose: true,
					  shade: 0.8,
		        maxmin: true,
					  area: ['80%', '90%'],
					  content: 'auth_asset/?type=auth&id='+data.id
					});
    } else if(obj.event === 'auth_asset_del') { //移除授权资产
        layer.open({
					  type: 2,
					  title: '移除授权资产组',
					  shadeClose: true,
					  shade: 0.8,
		        maxmin: true,
					  area: ['80%', '90%'],
					  content: 'auth_asset/?type=del&id='+data.id
					});
    }
  });

  var $ = layui.$, active = {
    delUser: function(){ //删除选中组
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      if(data.length){
	      del_data = {'data': JSON.stringify(data)};
	      $.ajax({
		        url: '{% url 'user:group_del' %}?type=all',
		        dataType: 'json',
		        type: 'post',
		        data: del_data,
		        success: function (datas) {
				        if(datas.code === 0) {
				            layer.msg(datas.msg);
				            window.location.href="{% url 'user:group_list' %}";
				        } else{
				            layer.msg(datas.msg)
				        }
	          }
	      });
      } else {
          layer.msg("未选中数据");
      }
    }
    ,addUser: function(){ //添加授权组
      var checkStatus = table.checkStatus('idTest');
{#      ,data = checkStatus.data;#}
{#      layer.msg('选中了：'+ data.length + ' 个');#}
      window.location.href="{% url 'user:group_add' %}";
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>

{% endblock %}